<!--侧边菜单-->
<template>
  <div class="menu-box">
    <div class="top-item">
      <div
        class="avatar"
        :class="{ active: activeMenu == 'avatar' }"
        @click="handleClick('avatar')"
      >
        <chat-avatar
          :size="40"
          :content="userInfo.avatar || userInfo.name"
        ></chat-avatar>
      </div>
      <div
        class="badge"
        :class="{ active: activeMenu == 'badge' }"
        @click="handleClick('badge')"
      ></div>
      <div
        class="contact"
        :class="{ active: activeMenu == 'contact' }"
        @click="handleClick('contact')"
      ></div>
      <div
        class="folde"
        :class="{ active: activeMenu == 'folde' }"
        @click="handleClick('folde')"
      ></div>
      <div
        class="full-screen"
        :class="{ active: activeMenu == 'full-screen' }"
        @click="$emit('fullScreenChange')"
      ></div>
    </div>
    <div class="bottom-item">
      <div class="ski" :class="{ active: activeMenu == 'ski' }">
        <el-color-picker
          class="color-picker_box"
          :predefine="['#2497A2', '#017CF6', 'rgb(22, 72, 126)']"
          color-format="rgb"
          v-model="theme"
          @change="handleColorChange"
        ></el-color-picker>
      </div>

      <div
        class="set"
        :class="{ active: active == 'set' }"
        @click="handleClick('set')"
      ></div>
    </div>
  </div>
</template>

<script>
import lockr from "lockr"
import chatAvatar from "./common/avatar.vue"
import { mapState } from "vuex"

export default {
  components: {
    chatAvatar
  },
  data() {
    return {
      active: "badge",
      theme: `rgb(${this.$store.state.themeColor})`
    }
  },

  mounted() {
    this.$store.commit("setThemeColor")
  },
  computed: {
    ...mapState(["activeMenu"]),
    userInfo() {
      return this.$store.state.userInfo
    }
  },

  methods: {
    handleClick(val) {
      this.active = val
      this.$store.commit("setSelectedMenu", val)
      this.$emit("selectChange", val)
    },
    handleColorChange(e) {
      if (e) {
        const rgb = e.replace("rgb(", "").replace(")", "")
        this.$store.commit("setThemeColor", rgb)
      }
    },
    handleScreen() {}
  }
}
</script>
<style lang="less" scoped>
.menu-box {
  width: 60px;
  height: 100%;
  background-color: rgb(var(--color-primary));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .top-item,
  .bottom-item {
    > div {
      width: 40px;
      height: 40px;
      margin-top: 20px;
      border-radius: 1px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }
  }
  .top-item {
    margin-top: 20px;
  }

  .bottom-item {
    margin-bottom: 15px;
  }

  .avatar {
    position: relative;
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .badge {
    background: url("@/assets/menu/badge-normal.svg") no-repeat center;
    &:hover,
    &.active {
      background: url("@/assets/menu/badge-hover.svg") no-repeat center;
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        left: 0;
        top: 0;
      }
    }
  }
  .full-screen {
    background: url("@/assets/menu/full-screen-normal.svg") no-repeat center;
    &:hover,
    &.active {
      background: url("@/assets/menu/full-screen-hover.svg") no-repeat center;
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        left: 0;
        top: 0;
      }
    }
  }

  .folde {
    background: url("@/assets/menu/folde-normal.svg") no-repeat center;
    &:hover,
    &.active {
      background: url("@/assets/menu/folde-hover.svg") no-repeat center;
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        left: 0;
        top: 0;
      }
    }
  }

  .ski {
    background: url("@/assets/menu/ski-normal.svg") no-repeat center;
    &:hover,
    &.active {
      background: url("@/assets/menu/ski-hover.svg") no-repeat center;
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        left: 0;
        top: 0;
      }
    }
  }

  .set {
    background: url("@/assets/menu/set-normal.svg") no-repeat center;
    &:hover,
    &.active {
      background: url("@/assets/menu/set-hover.svg") no-repeat center;
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        left: 0;
        top: 0;
      }
    }
  }
  .contact {
    background: url("@/assets/menu/contact-normal.svg") no-repeat center;
    &:hover,
    &.active {
      background: url("@/assets/menu/contact-hover.svg") no-repeat center;
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        left: 0;
        top: 0;
      }
    }
  }

  .color-picker_box {
    // position: relative;
    opacity: 0;
    // top: -60px;
  }
}
</style>
